<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>采购退货</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row>
      <el-button type="primary" @click="dialogFormVisible = true"
        >创建采购退货</el-button
      >
      <el-button type="success" @click="Search">查询</el-button>
      <el-button type="info" @click="SearchOut">导出报表</el-button>
    </el-row>
    <!-- 查询隐藏框 -->
    <div class="hfy-search-box" v-show="IsShow">
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="单据编号:">
          <el-input class="myInput" v-model="form.number"></el-input>
        </el-form-item>
        <span class="hfy-span">&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</span>
        <el-form-item>
          <el-input class="myInput" v-model="form.number1"></el-input>
        </el-form-item>
        <el-form-item label="商品类型:">
          <el-select placeholder="请选择类型" v-model="form.name">
            <el-option label="类型一" value="shanghai"></el-option>
            <el-option label="类型二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商:" v-model="form.shop">
          <el-input class="myInput"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success">确认查询</el-button>
          <el-button type="info" @click="SearchOff">收起</el-button>
          <el-button type="info" v-show="IsOut">确认导出</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="创单日期:">
          <el-input class="myInput" v-model="form.date1"></el-input>
        </el-form-item>
        <span class="hfy-span">&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</span>
        <el-form-item>
          <el-input class="myInput" v-model="form.date2"></el-input>
        </el-form-item>
        <el-form-item label="出库门店:">
          <el-select placeholder="请选择门店" v-model="form.region">
            <el-option label="门店一" value="mendian1"></el-option>
            <el-option label="门店二" value="mendian2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库柜台:">
          <el-select placeholder="请选择柜台" v-model="form.table">
            <el-option label="柜台一" value="guitai"></el-option>
            <el-option label="柜台二" value="guitaii"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创单人:">
          <el-input v-model="form.peple"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间内容部分 -->
    <div class="hfy-content">
      <el-table
        class="myTabel"
        :data="tableData"
        :border="true"
        style="width: 100%"
      >
        <el-table-column fixed prop="id" label="行号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100" align="center">
          {{statenow}}
        </el-table-column>
        <el-table-column
          prop="documentid"
          label="单据编号"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="创单日期"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="fendianname"
          label="出库门店"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shopid"
          label="出库柜台"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="supplierid"
          label="供应商"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="splxid"
          label="商品类型"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="number" label="数量" width="100" align="center">
        </el-table-column>
        <el-table-column prop="weight" label="重量" width="100" align="center">
        </el-table-column>
        <el-table-column prop="cost" label="成本" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="coefficient"
          label="系数"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="labelamount"
          label="标签余额"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createperson"
          label="创单人"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="approver"
          label="审批人"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="approverdate"
          label="审批日期"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="ChangeStateF(scope.row)"
              >{{scope.row.state == "0" ? "审核" : "撤销驳回"}}</el-button
            >
            <el-button
              size="small"
              type="warning"
              @click="getSearchSingle(scope.row)"
              >查看(编辑)</el-button
            >
            <el-button size="small" type="danger" @click="DelOpen(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="hfy-buttom">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 3, 4, 5]"
          :page-size="1"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 采购退货弹出层 -->
    <el-dialog
      title="新增采购退货单"
      :center="true"
      :visible.sync="dialogFormVisible"
      width="90%"
      class="hfy-addout"
    >
      <el-form :model="addSingleList" :inline="true">
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="addSingleList.splxid" placeholder="请选择类型">
            <el-option label="龙头商品" value="1"></el-option>
            <el-option label="凤尾商品" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库门店" :label-width="formLabelWidth">
          <el-select
            v-model="addSingleList.fendianname"
            placeholder="请选择门店"
          >
            <el-option label="成都第一店" value="1"></el-option>
            <el-option label="成都第二店" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创单日期" :label-width="formLabelWidth">
          <el-input
            v-model="addSingleList.createtime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="addSingleList" :inline="true">
        <el-form-item label="供应商" :label-width="formLabelWidth">
          <el-select
            v-model="addSingleList.supplierid"
            placeholder="请选择类型"
          >
            <el-option label="供应商一" value="1"></el-option>
            <el-option label="供应商二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="柜台/类库名称" :label-width="formLabelWidth">
          <el-select v-model="addSingleList.counterid" placeholder="请选择柜台">
            <el-option label="柜台一" value="1"></el-option>
            <el-option label="柜台二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据编号" :label-width="formLabelWidth">
          <el-input
            v-model="addSingleList.documentid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="gridData" border>
        <el-table-column
          property="num"
          label="行号"
          width="50"
          algin="center"
        ></el-table-column>
        <el-table-column
          property="commodity"
          label="商品编码"
          width="100"
        ></el-table-column>
        <el-table-column
          property="productName"
          label="商品名称"
        ></el-table-column>
        <el-table-column
          property="mouldNumber"
          label="模具号"
        ></el-table-column>
        <el-table-column
          property="electricalStyle"
          label="电商款号"
        ></el-table-column>
        <el-table-column property="styleNumber" label="款号"></el-table-column>
        <el-table-column property="classify" label="分类1"></el-table-column>
        <el-table-column property="certificate" label="证书1"></el-table-column>
        <el-table-column property="etc" label="成色"></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column
          property="singleAmount"
          label="单件量"
        ></el-table-column>
        <el-table-column property="counts" label="数量"></el-table-column>
        <el-table-column property="hand" label="手寸"></el-table-column>
        <el-table-column property="rack" label="料架"></el-table-column>
        <el-table-column
          property="saleofcosts"
          label="销售工费"
        ></el-table-column>
        <el-table-column
          property="additionalCharge"
          label="附加费"
        ></el-table-column>
        <el-table-column
          property="nameOfSeries"
          label="系列名称"
        ></el-table-column>
        <el-table-column property="remark" label="备注"></el-table-column>
        <el-table-column property="brand" label="品牌"></el-table-column>
        <el-table-column
          property="priceType"
          label="价格类型"
        ></el-table-column>
        <el-table-column
          property="lablePrice"
          label="标签单价"
        ></el-table-column>
        <el-table-column
          property="costValuation"
          label="成本计价"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="100"
      >
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSingleMsg">确 定</el-button>
      </div>
      <el-row class="hfy-out">
        <el-button type="primary hfy-outBtn" class="hfy-outBtn"
          >选择退货商品</el-button
        >
        <el-button type="success" class="hfy-outBtn">批量编码</el-button>
        <el-button type="danger" class="hfy-outBtn">完成退货</el-button>
      </el-row>
    </el-dialog>
    <!-- 采购退货单个查看弹出层 -->
    <el-dialog
      title="查看（编辑）"
      :visible.sync="centerDialogVisible"
      width="1300px"
      center
    >
      <el-form :inline="true" :model="SearchSingleEdit" label-width="80px">
        <el-form-item label="行号">
          <el-input v-model="SearchSingleEdit.id"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="SearchSingleEdit.state"></el-input>
        </el-form-item>
        <el-form-item label="单据编号">
          <el-input v-model="SearchSingleEdit.documentid"></el-input>
        </el-form-item>
        <el-form-item label="创单日期">
          <el-input v-model="SearchSingleEdit.createtime"></el-input>
        </el-form-item>
        <el-form-item label="出库门店">
          <el-input v-model="SearchSingleEdit.fendianname"></el-input>
        </el-form-item>
        <el-form-item label="出库柜台">
          <el-input v-model="SearchSingleEdit.counterid"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-input v-model="SearchSingleEdit.splxid"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="SearchSingleEdit.number"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="SearchSingleEdit.weight"></el-input>
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="SearchSingleEdit.cost"></el-input>
        </el-form-item>
        <el-form-item label="系数">
          <el-input v-model="SearchSingleEdit.coefficient"></el-input>
        </el-form-item>
        <el-form-item label="标签余额">
          <el-input v-model="SearchSingleEdit.labelamount"></el-input>
        </el-form-item>
        <el-form-item label="创单人">
          <el-input v-model="SearchSingleEdit.createperson"></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input v-model="SearchSingleEdit.approver"></el-input>
        </el-form-item>
        <el-form-item label="审批日期">
          <el-input v-model="SearchSingleEdit.approverdate"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goEditLst">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPurchaseDelAPI,
  addSingleListAPI,
  getSingleSearchEditAPI,
  ChangeState,
  getPurchaseTOtal,
} from "@/http/purchaseAPI.js";
export default {
  data() {
    return {
      tableData: [],
      gridData: [
        {
          num: "",
          commodity: "",
          productName: "",
          mouldNumber: "",
          electricalStyle: "",
          styleNumber: "",
          classify: "",
          certificate: "",
          etc: "",
          weight: "",
          singleAmount: "",
          counts: "",
          hand: "",
          rack: "",
          saleofcosts: "",
          additionalCharge: "",
          nameOfSeries: "",
          remark: "",
          brand: "",
          priceType: "",
          lablePrice: "",
          costValuation: "",
        },
      ],
      form: {
        number: "",
        number1: "",
        name: "",
        shop: "",
        date1: "",
        date2: "",
        regin: "",
        table: "",
        peple: "",
      },
      addSingleList: {
        fendianname: "",
        createtime: "",
        counterid: "",
        documentid: "",
        splxid: "",
        supplierid: "",
      },
      statenow: "",
      size: 1,
      centerDialogVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "100px",
      total: 0,
      IsShow: false,
      IsOut: false,
      currentPage: "1",
      pageSize: "1",
      SearchSingleEdit: {},
    };
  },
  created() {
    // this.getInit(this.currentPage, this.pageSize);
    this.getInit();
  },
  methods: {
    //获取列表数据
    getInit() {
      getPurchaseTOtal(this.pageSize, this.currentPage)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(res.data.data);
          this.total = res.data.该页总条数;
          console.log("获取页码渲染数据成功", res.data.该页总条数);
          res.data.data.forEach((item) => {
            if (item.state == 0) {
              this.statenow = "已通过";
            }
            if (item.state == 1) {
              this.statenow = "已驳回";
            }
            if (item.state == 2) {
              this.statenow = "未审核";
            }
          });
        })
        .catch((err) => {
          console.log("获取渲染页码渲染数据失败", err);
        });
      // getPurchaseListAPI()
      //   .then((res) => {
      //     this.tableData = res.data.data;
      //     console.log("获取列表数据请求成功", res.data.data);
      //   })
      //   .catch((err) => {
      //     console.log("获取列表数据请求失败", err);
      //   });
    },
    // getInit(currentPage, pageSize) {
    //   getPurchaseTotal()
    //     .then((res) => {
    //       this.total = res.data.data;
    //     })
    //     .catch((err) => {
    //       console.log("获取总数量失败", err);
    //     });
    //   getPurchaseList(currentPage, pageSize)
    //     .then((res) => {
    //       this.tableData = res.data.data;
    //     })
    //     .catch((err) => {
    //       console.log("获取列表失败", err);
    //     });
    // },
    handleCurrentChange(currentPage) {
      this.currentPage = String(currentPage);
      this.getInit();

      console.log("当前页", currentPage);
    },
    handleSizeChange(pageSize) {
      this.pageSize = String(pageSize);
      this.getInit();
      console.log("当前展示数量", pageSize);
    },
    // 查询按钮
    Search() {
      this.IsShow = true;
    },
    // 导出按钮
    SearchOut() {
      this.IsShow = true;
      this.IsOut = true;
    },
    // 收起按钮
    SearchOff() {
      this.IsShow = false;
      this.IsOut = false;
    },
    //单个查看
    getSearchSingle(row) {
      this.centerDialogVisible = true;
      this.SearchSingleEdit = row;
      console.log(row);
    },
    //查看后编辑提交
    goEditLst() {
      this.$confirm("您是否提交本次编辑后的信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.centerDialogVisible = false;
          getSingleSearchEditAPI(this.SearchSingleEdit)
            .then((res) => {
              this.getInit();
              console.log("编辑提交请求成功", res);
            })
            .catch((err) => {
              console.log("编辑提交请求失败", err);
            });
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.SearchSingleEdit = {};
        })
        .catch(() => {
          this.SearchSingleEdit = {};
          this.$message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
    // 单个删除 6.14
    DelOpen(row) {
      let id = row.id;
      this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          getPurchaseDelAPI(id)
            .then((res) => {
              this.getInit();
              console.log("删除请求成功", res);
            })
            .catch((err) => {
              console.log("删除请求失败", err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增采购退货信息
    addSingleMsg() {
      let newMsglist = this.addSingleList;
      console.log(this.addSingleList);
      this.$confirm("您确认新增采购退货信息吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          addSingleListAPI(newMsglist);
          this.addSingleList = {};
          this.getInit();
          this.$message({
            type: "success",
            message: "新增成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消新增信息",
          });
        });
    },
    // 审核状态改变
    ChangeStateF(row) {
      let id = row.id;
      let state = row.state;
      let username=row.approver
      console.log(id, state,username);
      ChangeState(id, state,username)
        .then((res) => {
          console.log("审核状态请求成功",res.data);
          this.getInit();
        })
        .catch((err) => {
          console.log("审核状态请求失败",err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/var.scss";
.hfy-top {
  margin: 10px 0 10px 20px;
}
.hfy-content {
  margin-top: 10px;
  padding: 0 20px;
  .myTabel {
    font-size: 12px;
  }
}
.hfy-search-box {
  margin-top: 10px;
  margin-left: 20px;
  .hfy-span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }
}
.hfy-buttom {
  margin-left: 15px;
}
// 新增退货弹框
.hfy-addout {
  // position: relative;
  .hfy-out {
    position: absolute;
    right: 10px;
    top: 100px;
    .hfy-outBtn {
      height: 80px;
    }
  }
}
</style>